<template>
  <el-dialog v-model="state.visible" @close="handleClose" destroy-on-close center>
    <el-form :model="state.info" :rules="state.rules" ref="refForm" label-width="140px" class="good-form">

      <el-form-item label="商品名称">
        <el-input v-model="state.info.title" maxlength="64" show-word-limit/>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-upload
          v-model:file-list="state.coverList"
          list-type="picture-card"
          accept="image/*"
          :action="uploadServer"
          :headers="{ Authorization: local.get('ADMIN.TOKEN') }"
          :on-success="uploader">
          <el-icon>
            <Plus/>
          </el-icon>
          <template #file="{ file }">
            <img class="el-upload-list__item-thumbnail"
              :class="[computedMaster(file)]"
              :src="file.url" :alt="file.name"/>
            <span class="el-upload-list__item-actions">
              <el-button title="设置主图" size="small" @click="master(file)"><el-icon><TurnOff/></el-icon></el-button>
              <el-button title="查看大图" size="small" @click="onpreview(file)"><el-icon><Picture/></el-icon></el-button>
              <el-button title="删除图片" size="small" @click="onremove(file)"><el-icon><Delete/></el-icon></el-button>
            </span>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model.number="state.info.price" :input-style="{width: '45%', marginRight: '10%'}">
          <template #prepend>售价</template>
        </el-input>
        <el-input v-model.number="state.info.cost_price" :input-style="{width: '45%'}">
          <template #prepend>成本价</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model.number="state.info.stock" max="9999"/>
      </el-form-item>
      <el-form-item label="商品上架">
        <el-switch
          v-model="state.info.isdown"
          class="mt-2"
          style="margin-left: 24px"
          :active-value="1"
          :inactive-value="2"
          inline-prompt
          active-text="上架"
          inactive-text="下架"/>
      </el-form-item>
      <el-form-item label="推荐热门">
        <el-switch
          v-model="state.info.ishot"
          class="mt-2"
          style="margin-left: 24px"
          :active-value="1"
          :inactive-value="2"
          inline-prompt
          active-text="是"
          inactive-text="否"/>
      </el-form-item>
      <el-form-item label="是否置顶">
        <el-switch
          v-model="state.info.istop"
          class="mt-2"
          style="margin-left: 24px"
          :active-value="1"
          :inactive-value="2"
          inline-prompt
          active-text="是"
          inactive-text="否"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="preview.visible">
    <img w-full :src="preview.image.url" :alt="preview.image.name" width="100%"/>
  </el-dialog>

  <!-- Image Preview -->
  <viewer :images="images">
    <img v-for="src in images" :key="src" :src="src">
  </viewer>
</template>

<script setup>
import { Delete, Picture, Plus, TurnOff } from "@element-plus/icons";
import { computed, reactive } from "vue";
import { successful } from "../utils/upload";
import { uploadServer } from "../utils";
import { local } from "../utils/storage";
import { AdminGoodsInfo, AdminGoodsPut } from "../api/server/goods";
import { ElMessage } from "element-plus";

const props = defineProps({
  reload: Function
})

const images = ref([])
const state = reactive({
  visible: false,
  info: {},
  coverList: [],
})
const preview = reactive({
  visible: false,
  image: {}
})

const show = (id) => {
  state.visible = true
  getGoodsInfo(id)
}

const getGoodsInfo = (id) => {
  AdminGoodsInfo(id).then(({ data }) => {
    state.info = data
    if (data.cover) {
      state.coverList = data.cover.split(',').map((d) => {
        return { name: d.replace(/^.+?([^\/]+?)(.[^.\/]*?)?$/gi, "$1"), url: d }
      })
    }
    console.info(state.coverList)
  })
}

const master = (file) => {
  state.info.master = file.response?.data || file.url
}
// 设置主图 样式
const computedMaster = computed(() => (file) => {
  const image = file.response?.data || file.url
  return state.info.master === image ? 'master-primary' : ''
})

const handleClose = () => {

}

const uploader = (response, file) => {
  state.info.master = successful(response, file)
}

const onpreview = (file, files) => {
  console.info(file, files)
  preview.visible = true
  preview.image = file
}
const onremove = (file, files) => {
  console.info(file, files)
  state.coverList = state.coverList.filter(item => item !== file)
  console.info(state.coverList)
}

const submit = () => {
  const images = state.coverList.map(d => {
    if (d.response && d.response.code === 200) {
      return d.response.data
    } else {
      return d.url
    }
  })
  state.info.cover = images.join(',')

  console.info(state.info, state.coverList)
  AdminGoodsPut(state.info.id, state.info).then((e) => {
    state.visible = false
    ElMessage.success('保存成功')
    props.reload()
  })
}

defineExpose({ show })
</script>

<style scoped>
.master-primary {
  box-sizing: border-box;
  /*border: 3px solid var(--el-color-primary);*/
}
</style>

<style>
.el-upload-list__item:has(> .master-primary) {
  box-shadow: 0 0 6px 3px var(--el-color-primary);
}
</style>
